<template>
  <div class="dashboard-container">
    <div class="app-container">
      <div class="header">
        <PageTools :show-before="true">
          <template #before>
            <span>本月：社保在缴 公积金在缴 增员 减员 入职 离职</span>
          </template>
          <template #after>
            <a href="#" style="padding-right:30px" @click="$router.push({path:'/social/pigeonhole'})">历史归档</a>
            <a href="#" @click="$router.push({path:'/social/socialReport', query: { yearMonth: yearMonth }})">
              {{ yearMonth }}月报表</a>
          </template>
          <template #bottom>
            <div class="part">
              <p>部门:</p>
              <el-checkbox-group v-model="departmentChecks" @change="filterEmployees">
                <el-checkbox v-for="item in departmentlist" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="social_city">
              <p>社保城市:</p>
              <el-checkbox-group v-model="socialSecurityChecks" @change="filterEmployees">
                <el-checkbox label="1084825908823904256">北京</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="fund_city">
              <p>公积金城市:</p>
              <el-checkbox-group v-model="providentFundChecks" @change="filterEmployees">
                <el-checkbox label="1084825908823904256">北京</el-checkbox>
              </el-checkbox-group>
            </div>
          </template>
        </PageTools>
      </div>
      <div class="main">
        <el-card>
          <el-table
            :data="tableData"
            style="width: 100%"
            @row-click="getSocialDetail"
          ><el-table-column type="index" label="序号" width="50" />
            <el-table-column
              prop="username"
              label="姓名"
              sortable
            />
            <el-table-column
              prop="mobile"
              label="手机"
              sortable
              width="180"
            />
            <el-table-column
              prop="workNumber"
              label="工号"
              sortable
            />
            <el-table-column
              prop="departmentName"
              label="部门"
              sortable
            />
            <el-table-column
              prop="timeOfEntry"
              label="入职时间"
              sortable
            />
            <el-table-column
              prop="leaveTime"
              label="离职时间"
              sortable
            >
              <template slot-scope="scope">
                {{ scope.row.leaveTime===null?'----':scope.row.leaveTime }}
              </template>
            </el-table-column>
            <el-table-column
              prop="participatingInTheCity"
              label="社保城市"
            />
            <el-table-column
              prop="providentFundCity"
              label="公积金城市"
            />
            <el-table-column
              prop="socialSecurityBase"
              label="社保基金"
            />
            <el-table-column
              prop="providentFundBase"
              label="公积金基金"
            />
          </el-table>
          <el-pagination
            class="pagination"
            :current-page="page.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="page.pageSize"
            layout="sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// 部门列表数据
import { getDepartments } from '@/api/departments'
// 员工社保列表
import { getSocialList } from '@/api/social'
export default {
  data() {
    return {
      departmentlist: {},
      providentFundChecks: [], // 公积金城市
      socialSecurityChecks: [], // 参保城市
      departmentChecks: [], // 选中的部门
      // 表格数据
      tableData: [],
      page: {
        page: 1,
        pageSize: 10,
        total: null
      },
      yearMonth: '202005'

    }
  },
  async created() {
    // 获取部门列表
    const { depts } = await getDepartments()
    this.departmentlist = depts
    // 获取员工社保列表
    this.getSocialList()
    // 获取企业社保配置信息
    // console.log(this.$route.query)
    this.yearMonth = this.$route.query.yearMouth
  },
  methods: {
    // 获取员工社保列表
    async  getSocialList() {
      const { total, rows } = await getSocialList({
        departmentChecks: this.departmentChecks,
        page: this.page.page,
        pageSize: this.page.pageSize,
        providentFundChecks: this.providentFundChecks,
        socialSecurityChecks: this.socialSecurityChecks })
      this.page.total = total
      console.log(rows)
      this.tableData = rows
    },
    // 分页功能
    handleSizeChange(newsize) {
      this.page.pageSize = newsize
      // 获取员工社保列表
      this.getSocialList()
    },
    handleCurrentChange(newpage) {
      // console.log(newpage)
      this.page.page = newpage
      // 获取员工社保列表
      this.getSocialList()
    },
    // 社保列表筛选
    filterEmployees() {
      // console.log(this.departmentChecks)
      // 获取员工社保列表
      this.getSocialList()
    },
    // 跳转到员工社保详细
    getSocialDetail(row, column, event) {
      // console.log(row, column, event)
      // console.log(row.id)
      this.$router.push({ path: `/social/detail/${row.id}` })
    }
  }
}
</script>
<style scoped>
 .pagination{
   float: right;
   margin: 10px 0;
 }
 ::v-deep .has-gutter th{
   background-color: #fafafa;
   border-bottom: 2px solid #e8e8e8;
 }
</style>
